<template>
  <div>
    <!-- 面包屑导航 -->
    <el-breadcrumb separator="/">
      <el-breadcrumb-item to="/">首页</el-breadcrumb-item>
      <el-breadcrumb-item to="/home/spumanage/spuaccount">商品管理</el-breadcrumb-item>
      <el-breadcrumb-item>相册管理</el-breadcrumb-item>
    </el-breadcrumb>

    <el-divider></el-divider>

    <div class="box">
      <el-row>
        <el-col :span="8">
          <div class="grid-content bg-purple">
            <h3 style="line-height: 32px">
              <i class="el-icon-s-tools"></i> &nbsp; 管理信息
            </h3>
          </div>
        </el-col>
        <el-col :span="16" style="text-align: right">
          <div class="grid-content bg-purple">
            <el-button
              size="small"
              type="primary"
              icon="el-icon-circle-plus-outline"
            >
              新建相册
            </el-button>
            <el-button size="small" type="primary" icon="el-icon-sort">
              排序设置
            </el-button>
          </div>
        </el-col>
      </el-row>
      <div class="divider"></div>

      <el-row :gutter="15" class="whererow">
        <el-col :span="4" style="line-height: 32px">当前共1个商品相册。</el-col>
        <el-col :span="6">
          <el-input
            v-model="search"
            type="text"
            size="small"
            placeholder="请输入相册名称"
          >
            <i slot="prefix" class="el-input__icon el-icon-search"></i>
          </el-input>
        </el-col>
      </el-row>
    </div>

    <div class="noticerow box">
      <i class="el-icon-document"></i> &nbsp; 相册列表
    </div>

    <div class="box" style="background: #f9f9f9">
      <photo-album-item
        v-for="(item, i) in albums"
        :key="i"
        :currentAlbum="item"
      ></photo-album-item>

      <div class="pagination">
        <el-pagination
          background
          @current-change="handleCurrentChange"
          :current-page="currentPage"
          layout="total, prev, pager, next, jumper"
          :total="total"
        >
        </el-pagination>
      </div>
    </div>
  </div>
</template>

<script>
import photoAlbumItem from "@/components/PhotoAlbumItem.vue";
export default {
  components: {
    photoAlbumItem,
  },
  data() {
    return {
      albums: [], // 表示当前相册列表
      currentPage: 1, // 表示当前页码
      pageSize: 5, // 表示每页多少条
      total: 0, // 表示总条目数
      search: "",
    };
  },

  mounted() {
    this.loadAlbums();
  },

  methods: {
    /**
     *  加载相册列表 
     */
    loadAlbums() {
      let page = this.currentPage;
      let pageSize = this.pageSize;
      this.$api.albumApi.query({ page, pageSize }).then((res) => {
        console.log(res);
        if(res.data.state==200){
          this.albums = res.data.data.list;
          this.total = res.data.data.total;
        }else{
          this.$alert(res.data.message, '提示')
        }
      });
    },

    handleCurrentChange(val) {
      console.log(`即将加载选中页: 第${val}页`);
      this.currentPage = val;
      this.loadAlbums();
    },
    
  },
};
</script>
